
######################################################################################
## MAKE SOME DISPLAY DATA AND SOME SIMPLE DISPLAY LOGIC
######################################################################################

class EquipmentSlotViewModel
  _css_hidden_ = "rhbox hidden"
  _css_visible_ = "rhbox"

  _toggle_hidden_ = ( notify ) ->
    nvalue = _css_visible_
    if notify.GetValue() == _css_visible_ then nvalue = _css_hidden_
    notify.SetValue( nvalue )

  constructor : ( title, list ) ->
    @SlotName = title
    @EquipmentList = new NotifyArray( list )
    @ListCssClass = new Notify( _css_hidden_ )
    @SelectedEquipment = new Notify( list.pop() )

  handle_select_click : () =>
    _toggle_hidden_( @ListCssClass )

  handle_set_equip_click : ( equip_model ) =>
    addition = @SelectedEquipment.GetValue()

    @EquipmentList.remove( equip_model )
    @EquipmentList.add( addition )
    @SelectedEquipment.SetValue( equip_model )

# a simple wrapper around each of our slots.
class EquipmentSelectionViewModel
  constructor : (weapon_list, armor_list, misc_list) ->
    @EquipmentSlotList = [ new EquipmentSlotViewModel( "Weapons", weapon_list ),
                           new EquipmentSlotViewModel( "Armor", armor_list ),
                           new EquipmentSlotViewModel( "Misc", misc_list ) ]

# a bunch of json lists.
weapon_list = [{"name":"Gunnn!!","attributes":[{"name":"Atk","value":5},{"name":"Def","value":10}]},{"name":"other gnna!","attributes":[{"name":"Atk","value":10},{"name":"Def","value":2}]},{"name":"raaawrrr","attributes":[{"name":"Atk","value":3},{"name":"Def","value":4}]},{"name":"a gun","attributes":[{"name":"Atk","value":1},{"name":"Def","value":7}]},{"name":"oterhs gun","attributes":[{"name":"Atk","value":8},{"name":"Def","value":1}]}]
armor_list = [{"name":"super armor!!","attributes":[{"name":"Atk","value":9},{"name":"Def","value":3}]},{"name":"mega armor!","attributes":[{"name":"Atk","value":3},{"name":"Def","value":5}]},{"name":"ARRRMORRR","attributes":[{"name":"Atk","value":10},{"name":"Def","value":10}]}]
misc_list = [{"name":"I am","attributes":[{"name":"Atk","value":10},{"name":"Def","value":10}]},{"name":"fairly pleased","attributes":[{"name":"Atk","value":2},{"name":"Def","value":5}]},{"name":"with the ","attributes":[{"name":"Atk","value":6},{"name":"Def","value":8}]},{"name":"results","attributes":[{"name":"Atk","value":6},{"name":"Def","value":4}]}]

complete_model = new EquipmentSelectionViewModel( [ "name": "loading", attributes : [] ], armor_list, misc_list )


loadJSON = (path, success, error) ->
  xhr = new XMLHttpRequest()
  xhr.onreadystatechange = () ->
    if (xhr.readyState == 4)
      if (xhr.status == 200)
        if (success)
          success(JSON.parse(xhr.responseText))
      else
        if (error)
          error(xhr)
  xhr.open("GET", path, true);
  xhr.send();



loadJSON( "test_data.json", ( data ) ->
  console.log("FIRE")
  complete_model.EquipmentSlotList[0].EquipmentList.SetValue( data )
)
######################################################################################
## OUR ACTUAL 'TEMPLATES' INCLUDING BINDING AND BEHAVIOR
######################################################################################

buildEquipmentTemplate = () ->
  o.div(
    o.span().text( (equip) -> equip.name )
    o.ul(
      o.List( ((equip) -> equip.attributes),
        o.li(
          o.span().text( (attrib) -> attrib.name )
          o.span().text( (attrib) -> attrib.value )
        )
      )
    )
  )

eq_sel_template =
  o.div(
    o.h3().text( "Slots..." ),
    o.List( ((complete_view_model) -> complete_view_model.EquipmentSlotList),
      o.Context( ((slot_view_model) -> slot_view_model.SelectedEquipment),
        buildEquipmentTemplate()
          .event( "click", (equip_view_model, slot_view_model) -> slot_view_model.handle_select_click )
          .attr(class: "selection_item")

      )
    )
  ).attr(
    class : "rhbox"
  )

selection_list_template =
  o.List( ((complete_view_model) -> complete_view_model.EquipmentSlotList),
    o.div(
      o.h3().text( (slot_view_model) -> slot_view_model.SlotName )
      o.List( ((slot_view_model) -> slot_view_model.EquipmentList),
        buildEquipmentTemplate()
          .event( "click", (equip_view_model, slot_view_model) -> slot_view_model.handle_set_equip_click )
          .attr( class : "item_block" )
          .enter_attr(class: "item_block_out")
          .exit_attr(class: "item_block_out")
      ).key_map( (equip_view_model) -> equip_view_model.name )
    ).attr(
      class : (slot_view_model) -> slot_view_model.ListCssClass
    )
  )

o.h3().text("Various items can be selected for a given 'slot'")
      .write( document.body )
o.p().text("In this example, we maintain the various dom elements on screen, simply changing the list container css to hide/show."+
           " The individual 'equipment' items selected from the list have 'enter/exit' attributes set to handle the addition and removal transitions." )
     .write( document.body )

eq_sel_template.write( document.body, complete_model )
selection_list_template.write( document.body, complete_model )

console.log( complete_model )